<template>
  <div>
    <div class="container">
      <!-- 顶部 -->
      <div class="top">
        <div class="top1">
          <span style="float: left">
            <router-link to="/wenda"><img class="img" src="	https://image.hongbeibang.com/FoTuxKG5pqYKuAsT8BjrflkAxEpj?48X48&imageView2/1/w/48/h/48" alt="" /></router-link>
          </span>
          <div class="cc" style="float: right">
            <div class="cc1">收藏</div>
          </div>
        </div>
      </div>
      <!-- 主题 -->
      <template>
        <div class="main">
          <!-- 1. -->
          <div class="main1">
            <img style="background: none; width: 100%; height: 375px" :src="data.coverImage" alt="" />
            <!-- 1.2 -->
            <div class="main1-2">
              <div class="main1-2-1">{{ data.coverTitle }}</div>
              <!-- 1.2详情 -->
              <div class="main1-2-2">
                <p>{{ data.coverSummary }}</p>
              </div>
            </div>
            <!-- 1.3食材用料 -->
            <div class="main1-3">
              <div class="main1-3-title">食材用料</div>
              <!-- 1.3.1配料 -->
              <div class="peiliao">
                <div class="peiliao-1" v-for="(v, i) in data.material" :key="i">
                  <div class="peiliao-2">{{ v.name }}</div>
                  <div class="peiliao-2">{{ v.weight }}</div>
                </div>
              </div>
            </div>
            <!-- 1.4制作步骤 -->
            <div class="main1-4">
              <div class="center">
                <div class="center1" v-for="(v, i) in data.step" :key="i">
                  <div class="shunxu">步骤{{ i + 1 }}</div>
                  <img style="background: none; width: 345px; height: 258.973px" :src="v.image" alt="" />
                  <div class="buzhou">
                    <div class="buzhou1">
                      <p>{{ v.text }}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [],
      material: []
    }
  },
  watch: {
    //监听到路由跳转 刷新一次
    $route() {
      location.reload()
    }
  },
  mounted() {
    this.getData()
    this.cure()
  },
  methods: {
    cure() {
      this.$route.query.lid
    },
    getData() {
      this.axios.get(`/recipe/get?_t=1666272573988&contentId=${this.$route.query.lid}&quantity=&timestamp=1666272573984`).then(res => {
        console.log('打印，', res.data.data.recipe)
        this.data = res.data.data.recipe
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.top1 {
  background: #ffffff;
  height: 44px;
  z-index: 6;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 0 18px;
  margin: 0 auto;
  max-width: 600px;
  box-sizing: border-box;
}
span {
  font-size: 0;
  height: 44px;
  float: left;
  display: inline-block;
  cursor: pointer;
  text-align: center;
  position: relative;
  z-index: 1;
  img {
    width: 27px;
    height: 27px;
    margin: 9.5px 0;
  }
}
//收藏
.cc {
  margin: 7px 0;
  position: relative;
  z-index: 1;
  height: 30px;
  .cc1 {
    font-size: 14px;
    width: 70px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    background-color: #ffffff;
    color: #e98b71;
    border: 1px solid;
    border-color: #e98b71;
    border-radius: 18px;
  }
}
// 主体
.main {
  position: absolute;
  top: 50px;
}
// 1.2
.main1-2 {
  padding: 0 15px;
  margin: 0;
  overflow: hidden;
  position: relative;
  zoom: 1;
  .main1-2-1 {
    //小标题
    color: #4a4945;
    line-height: 35px;
    font-size: 25px;
    font-weight: bold;
    word-wrap: break-word;
    position: relative;
    margin: 15px 0;
    border-bottom: 2px solid #f1f1f1;
  }
  // 详情
  //
  .main1-2-2 {
    letter-spacing: 3px;
    margin-top: 15px;
    margin-bottom: 30px;
    p {
      color: #313131;
      line-height: 27px;
      font-weight: 200;
      font-size: 17px;
      margin: 0;
    }
  }
}
// 食材用料
.main1-3 {
  position: relative;
  margin: 0 15px;
  padding: 0;
  .main1-3-title {
    background-color: #fff;
    padding-top: 15px;
    // padding-horizontal: 15px;
    font-size: 16px;
    line-height: 22.5px;
    color: #313131;
    font-weight: bold;
  }
  .peiliao {
    margin: 0 auto;
    padding: 10px 0 15px 0;
    overflow: hidden;
    zoom: 1;
    .peiliao-1 {
      flex-direction: row;
      padding: 10px 0;
      overflow: hidden;
      border-bottom: 1px solid #f1f1f1;
      display: flex;
      .peiliao-2 {
        flex: 1;
        justify-content: center;
        margin-right: 15px;
        font-size: 17px;
        line-height: 27px;
        color: #313131;
        font-weight: 300;
      }
    }
  }
}
// 制作步骤
.main1-4 {
  position: relative;
  margin-top: 25px;
  .center {
    margin: 0 15px;
    padding: 0;
    overflow: hidden;
    zoom: 1;
    .center1 {
      font-size: 0;
      padding: 15px 0;
      border-bottom: 1px solid;
      border-bottom-color: #f1f1f1;
      box-sizing: border-box;
      overflow: hidden;
      zoom: 1;
      .shunxu {
        position: relative;
        margin: 0 auto;
        padding: 0;
        font-size: 16px;
        color: #313131;
        font-weight: bold;
        line-height: 25px;
        overflow: hidden;
        zoom: 1;
      }
      .buzhou {
        overflow: hidden;
        word-wrap: break-word;
        letter-spacing: 1px;
        margin: 15px auto 0 auto;
        text-align: justify;
        .buzhou1 {
          margin: 0 auto;
          padding: 0;
          overflow: hidden;
          zoom: 1;
          p {
            color: #313131;
            letter-spacing: -0.5px;
            font-weight: 200;
            font-size: 18px;
            line-height: 27px;
          }
        }
      }
    }
  }
}
</style>
